<script setup lang="ts">
import { ref, computed } from 'vue';
import { genIndexCode } from './genIndexCode'
import { genViewCode } from './genViewCode'
import { genAppServiceCode } from './genAppServiceCode'
import { genServiceCode } from './genServiceCode'

const domain = ref('')
const moduleName = ref('')


const activeName = ref('')

const indexCode = computed(() => genIndexCode(domain.value, moduleName.value))
const viewCode = computed(() => genViewCode(domain.value, moduleName.value))
const appServiceCode = computed(() => genAppServiceCode(domain.value, moduleName.value))
const serviceCode = computed(() => genServiceCode(domain.value, moduleName.value))
</script>


<template>
  <IndexLayout>
    <template #header>
      <div class="input">
        <label>领域：</label>
        <ElInput v-model="domain" placeholder="请输入领域名称" />
        <ElInput v-model="moduleName" placeholder="请输入模块名称" />

        <ElButton type="primary">生成</ElButton>
      </div>
    </template>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane v-code label="index" name="index">
        <pre>
          <code>
          {{ indexCode }}
          </code>
        </pre>
      </el-tab-pane>
      <el-tab-pane v-code label="view" name="view">
        <pre>
          <code>
            {{ viewCode }}
          </code>
        </pre>
      </el-tab-pane>
      <el-tab-pane v-code label="appService" name="appService">
        <pre>
          <code>{{ appServiceCode }}</code>
        </pre>
      </el-tab-pane>
      <el-tab-pane v-code label="service" name="service">
        <pre>
          <code>{{ serviceCode }}</code>
        </pre>
      </el-tab-pane>
    </el-tabs>
  </IndexLayout>
</template>

<style lang="scss" scoped>
.input {
  display: flex;
  align-items: center;
  padding: 20px;

  label {
    width: 80px;
    text-align: left;
  }

  .el-input {
    width: 200px;
  }

  .el-button {
    margin-left: 20px;
  }
}
</style>